<template>
  <div class="account-wrap">
    <div class="account-box">
      <div class="account-con" @click="toPage">
        <span class="title">手机号修改</span>
        <img src="../../images/arrow.png" class="arrow"/>
      </div>
      <div class="account-con" @click="toPage">
        <span class="title">密码修改</span>
        <img src="../../images/arrow.png" class="arrow"/>
      </div>
      <div class="account-con" @click="toPage">
        <span class="title">密保问题修改</span>
        <img src="../../images/arrow.png" class="arrow"/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      toPage(path) {
        this.$router.push(path);
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .account-wrap
    position: fixed
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    overflow: hidden
    .account-box
      margin-top: 0.267rem
      wh(100%, auto)
      background: rgba(255, 255, 255, 1)
      .account-con
        wh(100%, 1.333rem)
        fj(space-between, center)
        border: 0.013rem solid rgba(238, 238, 238, 1)
        &:last-child
          border: none
        .title
          padding-left: 0.32rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .arrow
          padding-right: 0.347rem
          wh(0.213rem, 0.373rem)
</style>
